<template>
  <div>
    <svg class="waterpolo_svg" width="100%" height="100%">
      <defs>
        <filter
          id="b834c4d6-909f-492f-fe68-1ed883587539"
          x="-50%"
          y="-50%"
          width="200%"
          height="200%"
        >
          <feDropShadow
            dx="0"
            dy="0"
            stdDeviation="10"
            flood-color="#27c7f6"
          ></feDropShadow>
        </filter>
        <clipPath id="35c9398d-470b-48e8-fd7a-6be0b4dc3e3d">
          <path
            d="M4,87L5.16,87L6.32,87L7.48,87L8.64,87L9.8,87L10.96,87L12.120000000000001,87L13.28,87L14.44,87L15.600000000000001,87L16.759999999999998,87L17.92,87L19.08,87L20.240000000000002,87L21.4,87L22.56,87L23.720000000000002,87L24.88,87L26.04,87L27.200000000000003,87L28.36,87L29.52,87L30.68,87L31.84,87L33,87L34.16,87L35.32,87L36.480000000000004,87L37.64,87L38.8,87L39.96,87L41.12,87L42.28,87L43.440000000000005,87L44.599999999999994,87L45.76,87L46.92,87L48.08,87L49.24,87L50.400000000000006,87L51.559999999999995,87L52.72,87L53.88,87L55.04,87L56.2,87L57.36,87L58.519999999999996,87L59.68,87L60.839999999999996,87L62,87L63.160000000000004,87L64.32,87L65.48,87L66.64,87L67.80000000000001,87L68.96000000000001,87L70.11999999999999,87L71.28,87L72.44,87L73.6,87L74.76,87L75.92,87L77.08,87L78.24,87L79.4,87L80.56,87L81.72,87L82.88000000000001,87L84.03999999999999,87L85.19999999999999,87L86.36,87L87.52,87L88.67999999999999,87L89.84,87L91,87L92.16,87L93.32000000000001,87L94.48,87L95.64,87L96.80000000000001,87L97.96000000000001,87L99.11999999999999,87L100.28,87L101.44,87L102.6,87L103.76,87L104.92,87L106.08,87L107.24,87L108.4,87L109.56,87L110.72,87L111.88000000000001,87L113.03999999999999,87L114.19999999999999,87L115.36,87L116.52,87L117.67999999999999,87L118.84,87L120,87L120,75.75999999999999L118.84,77.00344943582427L117.67999999999999,78.16876837050857L116.52,79.18273552964344L115.36,79.98163962751008L114.19999999999999,80.51528258147576L113.03999999999999,80.75013364214135L111.88000000000001,80.67143625364344L110.72,80.28413526233008L109.56,79.61256621387894L108.4,78.69892626146235L107.24,77.60062276342339L106.08,76.3866661678215L104.92,75.13333383217847L103.76,73.9193772365766L102.6,72.82107373853762L101.44,71.90743378612103L100.28,71.23586473766989L99.11999999999999,70.84856374635655L97.96000000000001,70.76986635785863L96.80000000000001,71.00471741852422L95.64,71.53836037248992L94.48,72.33726447035656L93.32000000000001,73.35123162949141L92.16,74.51655056417573L91,75.75999999999999L89.84,77.00344943582427L88.67999999999999,78.16876837050857L87.52,79.18273552964344L86.36,79.98163962751008L85.19999999999999,80.51528258147576L84.03999999999999,80.75013364214135L82.88000000000001,80.67143625364344L81.72,80.2841352623301L80.56,79.61256621387894L79.4,78.69892626146235L78.24,77.60062276342339L77.08,76.3866661678215L75.92,75.13333383217847L74.76,73.9193772365766L73.6,72.82107373853762L72.44,71.90743378612105L71.28,71.23586473766989L70.11999999999999,70.84856374635655L68.96000000000001,70.76986635785863L67.80000000000001,71.00471741852422L66.64,71.53836037248992L65.48,72.33726447035654L64.32,73.35123162949141L63.160000000000004,74.51655056417572L62,75.75999999999999L60.839999999999996,77.00344943582427L59.68,78.16876837050857L58.519999999999996,79.18273552964344L57.36,79.98163962751006L56.2,80.51528258147576L55.04,80.75013364214135L53.88,80.67143625364344L52.72,80.28413526233008L51.559999999999995,79.61256621387894L50.400000000000006,78.69892626146236L49.24,77.60062276342337L48.08,76.3866661678215L46.92,75.13333383217847L45.76,73.91937723657661L44.599999999999994,72.82107373853762L43.440000000000005,71.90743378612105L42.28,71.2358647376699L41.12,70.84856374635655L39.96,70.76986635785863L38.8,71.00471741852422L37.64,71.53836037248992L36.480000000000004,72.33726447035654L35.32,73.35123162949141L34.16,74.51655056417572L33,75.75999999999999L31.84,77.00344943582427L30.68,78.16876837050857L29.52,79.18273552964344L28.36,79.98163962751006L27.200000000000003,80.51528258147576L26.04,80.75013364214135L24.88,80.67143625364344L23.720000000000002,80.2841352623301L22.56,79.61256621387894L21.4,78.69892626146236L20.240000000000002,77.60062276342339L19.08,76.38666616782152L17.92,75.13333383217847L16.759999999999998,73.9193772365766L15.600000000000001,72.82107373853762L14.44,71.90743378612105L13.28,71.2358647376699L12.120000000000001,70.84856374635655L10.96,70.76986635785863L9.8,71.00471741852422L8.64,71.53836037248992L7.48,72.33726447035654L6.32,73.35123162949141L5.16,74.51655056417572L4,75.75999999999999Z"
            transform="translate(24.5,0)"
          ></path>
        </clipPath>
      </defs>
      <g class="waterpolo_bg" transform-origin="62 87">
        <path
          fill="rgba(39,199,246,0.3)"
          d="M 76.5 87 A 14.5 14.5 0 1 1 76.5 86.999 z"
        ></path>
        <path
          stroke="#27c7f6"
          stroke-width="10"
          stroke-dasharray="5,20"
          fill="rgba(0,0,0,0)"
          d="M 106 87 A 44 44 0 1 1 106 86.99899999999998 z"
        ></path>
      </g>
      <g class="waterpolo_water inset-shadow">
        <path
          stroke="#27c7f6"
          stroke-width="2"
          fill="rgba(0,0,0,0)"
          d="M 91 58 A 29 29 0 1 1 91 57.998999999999995 z"
          filter="url(#b834c4d6-909f-492f-fe68-1ed883587539)"
        ></path>
        <text
          fill="#ffffff"
          font-size="16"
          transform="translate(62,58)"
          text-anchor="middle"
          style="dominant-baseline: middle;font-weight:bold"
        >
          {{title}}
        </text>
      </g>
      <!-- <g
        class="waterpolo_wave"
        clip-path="url(#35c9398d-470b-48e8-fd7a-6be0b4dc3e3d)"
      >
        <path
          fill="rgba(39,199,246,0.8)"
          stroke="rgba(0,0,0,0)"
          d="M 91 58 A 29 29 0 1 1 91 57.998999999999995 z"
        ></path>
        <text
          fill="rgba(255,255,255,0.5)"
          font-size="14"
          transform="translate(62,58)"
          text-anchor="middle"
          style="dominant-baseline: middle"
        >
          283项
        </text>
      </g> -->
    </svg>
  </div>
</template>
<script>
export default {
    data(){
      return {
        
      }
    },
    props:{
        title:{
            default:'',
            type:Number
        }
    }
}
</script>
<style scoped>

.waterpolo_bg {
    transform: rotateX(
76deg
)rotateZ(
0deg
);
    animation: myRotate 30s linear infinite;
}
@keyframes myRotate {
    from {
        transform: rotateX(76deg)rotateZ(0deg);
    }

    to {
        transform: rotateX(76deg)rotateZ(359deg);
    }
}
</style>